Push and Pull Classes

Backlight 4 & 5 Support
#1

Hi Rod,

I struggle with the push and pull classes.
I have problems with 3 columns, see the following example:

<div class="grid_12">  
<div class="col_4 push_8">
<h3>Desktop right - smart phones top</h3>   
<p>This text TOP on smart phones!</p>
<p>------------------------------</p>
</div>

<div class="col_4">   
<h3>Desktop center - smart phones below</h3>
<p>This text BELOW on smart phones!</p>
<p>------------------------------</p>
</div>

<div class="col_4 pull_8">   
<h3>Desktop left - smart phones center</h3>
<p>This text in the MIDDLE on smart phones</p>
<p>------------------------------</p>
</div>
</div>

Is it possible to arrange the rows according to the example?

Best regards,
Oliver

#2

I have an explanation of how the push/pull classes work here:

#3

Hi Rod,

I was working after your “Responsive grid framework in Backlight” but cannot figure out how to bring the centered column to below on smartphone.

#4

set each column up in the order you want them to appear on mobile.
The push and pull classes are in media queries that apply to displays wider than 992px.
Add the push or pull class to control the order of column appearance on desktop (displays 992px or wider)

#5

Thank you Rod.

The following is the wanted order on smart phone 1,2,3:

<div class="grid_12">  
<div class="col_4 push_8">
<h3>1</h3>   
<p>------------------------------</p>
</div>

<div class="col_4">   
<h3>2</h3>
<p>------------------------------</p>
</div>

<div class="col_4 pull_8">   
<h3>3</h3>
<p>------------------------------</p>
</div>
</div>

The order on displays wider than 992px should be 1,3,2

How to do that?

#6

Rod, I think I got it:

<div class="grid_12">  
<div class="col_4 push_8">
<h3>1</h3>   
<p>------------------------------</p>
</div>

<div class="col_4 pull_4">   
<h3>2</h3>
<p>------------------------------</p>
</div>

<div class="col_4 pull_4">   
<h3>3</h3>
<p>------------------------------</p>
</div>
</div

Thanks again!
Best regards,
Oliver

#7

Hey Oliver

That looks like it would give you 2,3,1 on the desktop

If you want it to be 1,3,2 on the desktop, use this:

<div class="grid_12">  
<div class="col_4">
<h3>1</h3>   
<p>------------------------------</p>
</div>

<div class="col_4 push_4">   
<h3>2</h3>
<p>------------------------------</p>
</div>

<div class="col_4 pull_4">   
<h3>3</h3>
<p>------------------------------</p>
</div>
</div>
#8

Thank you Rod,

I need it 2,3,1 on the desktop :wink: