Menu icon Foundation
Source ordering for mobile

Hello,

I'm having a little trouble with source ordering for mobile view. Here is the link im working on: http://www.tel3.com/temp/faqs_how_it_works.jsp

The FAQ menu that is currently on the right, I want that to be stacked underneath the header called "How It Works" in mobile view.

I've tried using source ordering but it only makes the desktop version change. Thanks for you help!

sourceorderingmobile

Hello,

I'm having a little trouble with source ordering for mobile view. Here is the link im working on: http://www.tel3.com/temp/faqs_how_it_works.jsp

The FAQ menu that is currently on the right, I want that to be stacked underneath the header called "How It Works" in mobile view.

I've tried using source ordering but it only makes the desktop version change. Thanks for you help!

Preston McPeak over 5 years ago

Hey Sophia! So you will need to do some rearranging with your code, and I'm going to tell you some best practices.

You should always nest a column inside a row, never a column inside a column. Your markup should look like so (this will remove the margin on the sides, so you will have to add this in again):

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="large-9 columns">FAQ Content</div>
        <div class="large-3 columns">List Links</div>
    </div>
</div>

Next you should also build mobile first, so that means specifying your Small classes before the Large classes and this means we will also build it so that the FAQ content appears after the the Links:

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="small-12 large-3 columns">List Links</div>
        <div class="small-12 large-9 columns">FAQ Content</div>
    </div>
</div>

Now in order to offset the FAQ content and the Links to opposite sides, Foundation 4's documentation has Source Ordering classes, but you can only push/pull when the number is less than 12. In this case, we can only source order on the large screens (which is why I moved the Links column above the FAQ columns). Final code should look like this:

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="small-12 large-3 push-9 columns">List Links</div>
        <div class="small-12 large-9 pull-3 columns">FAQ Content</div>
    </div>
</div>

Asif over 5 years ago

Sometimes you can achieve the results without using Source Ordering and using a simple Float Right

here is a sample layout :

   .content{
    min-height:200px;
  }
  .faq-content{
    min-height: 500px;
  }

<div class="row">
<div class="large-8 columns">
  <div class="panel content">
  <h4>How It Works</h4>

  </div>
</div>
<div class="large-4 columns right">
  <div class="panel faq-content">
    <h4>FAQs Here</h4>
  </div>
</div>
 <div class="large-8 columns">
 <div class="panel">
   <h4>How Do I Place a call with Tel</h4>
 </div>

 </div> 

here is a codepen for the same:

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

let me know if this helps

-Asif