Menu icon Foundation
Change Order of a Single Column

I am trying to switch the order of a single column, so that A appears under B on the mobile layout.

The only way I can get this to work is to repeat code, which is not ideal at all. Is there a way to do this?

I thought I could just make medium-12 columns push / pull, but this doesn't change the order.

<div class="show-for-small-only">
    <img src="accreditations_sml.png" alt="" />
	<p>Repeated element 1.</p>
	<p>Repeated element 2.</p>
</div>
            
<p>Some text.</p>

<div class="hide-for-small-only">
	<img src="accreditations_main.png" alt="" />
	<p>Repeated element 1.</p>
	<p>Repeated element 2.</p>
</div>
            

         

<div class="row">
    <div class="medium-12 medium-push-12 columns">12</div>
    <div class="medium-12 medium-pull-12 columns">12, last</div>
</div>  
            

         

gridorder

I am trying to switch the order of a single column, so that A appears under B on the mobile layout.

The only way I can get this to work is to repeat code, which is not ideal at all. Is there a way to do this?

I thought I could just make medium-12 columns push / pull, but this doesn't change the order.

<div class="show-for-small-only">
    <img src="accreditations_sml.png" alt="" />
	<p>Repeated element 1.</p>
	<p>Repeated element 2.</p>
</div>
            
<p>Some text.</p>

<div class="hide-for-small-only">
	<img src="accreditations_main.png" alt="" />
	<p>Repeated element 1.</p>
	<p>Repeated element 2.</p>
</div>
            

         

<div class="row">
    <div class="medium-12 medium-push-12 columns">12</div>
    <div class="medium-12 medium-pull-12 columns">12, last</div>
</div>  
            

         
Nic Edwards about 5 years ago

In your second code snippet those two just negate each other.

Here's a codepen with a fix:
http://codepen.io/rafibomb/pen/Cflai

Jamie Brightmore about 5 years ago

Thanks but you've not understood my situation, my fault -- I've not explained this well enough.

I know how to use push / pull to change to order of columns which are next to each other, but I am trying to get an element to change it's order without repeating the div. In the first code example above, I'd like to only use one div, the one under the < p > element, but have it appear 'above' the < p > element on a small screen. On medium and up screens, the < p > element and the div are already within a 'sidebar' type layout which uses push / pull itself. Hope that makes sense!

Looks like the only way will be to use jQuery to inject an html element when required.

Asif about 5 years ago

Jamie,

I dont think the push and pull would work in your situation, The push and pull would work by shifting the blog by number of columns to the right (push) or to the left (pull) but not up and down like you want with the 12 columns. Source Ordering would work with columns in 1 row (not class row per say), like when you have 4 and 8 columns in a single row or 3 and 9 columns or something in those lines.

I guess like you have already figured, your options are to use jquery to inject the block or hide and show using foundation's visibility classes which does have duplicate code.

Then again, this is just my opinion, some developers might have had some other tricks to achieve this which I would like to see as well.

-Asif

Les Mizzell about 5 years ago

I'm having a little trouble with this to ...

This page: http://columbiacityjazz.com/faculty

On mobile, I'd like the picture to ALWAYS be first. However, when I use push/pull, the picture is first, but it's offset so half of it is off screen.

<div class="row">
  <div class="large-7 columns small-push-5 ">

<h3 data-magellan-destination="shannon"><a name="shannon"></a>Headline</h3>   
    <p>Stuff Here.</p>
  </div>
  <div class="large-5 columns small-pull-7">
    <img src="/img_staff/Shannon-Manning.jpg" class="facPIC" />
  </div>
</div>

Karl Ward about 5 years ago

The columns are actually stacking correctly, but you need to set your images to 100% width so they scale the entire width of the column ...

Asif about 5 years ago

@Les

Sometimes you might not need to go the route of Source Ordering, sometimes a simple float right would work:

<div class="row"><!--- SHANNON MANNING --->
    <div class="large-5 columns right">
    <img title="Shannon Manning - Assistant Manager and Children's Dance Programs" alt="Shannon Manning - Assistant Manager and Children's Dance Programs" class="facPIC" src="http://columbiacityjazz.com/img_staff/Shannon-Manning.jpg">
</div>

<div class="large-7 columns">    
<h3 data-magellan-destination="shannon"><a name="shannon"></a>Shannon Manning - CCJC Studio Assistant Manager and Children's Programs</h3>   
    <p>Shannon Manning comes to us from Las Vegas, where she performed nightly with world renowned <em>Siegfried and Roy</em> at the Mirage for eight years. Her professional career began at 17, when she was hand picked by Paula Abdul to be in Janet Jackson's first music video <em>What Have You Done for Me Lately</em>? She appeared on the 1980s hit series <em>Fame</em>. Shannon toured the United States and Canada with the stage rendition of the movie <em>Dirty Dancing</em> choreographed by Doriana Sanchez. Her training includes San Francisco Ballet School, Marin Ballet School, and Dupree Dance Academy with scholarships at the later two.</p>
  </div>
</div>

Here is the codepen:

http://codepen.io/asif999/pen/jrdep

Let me know if this works for you