On a 768px breakpoint moving the order of right column first and then the left column below

Question

I was able to do the Source Ordering using push and pull method. But what the whole right column comes on top of the left column. What i want to achieve is shown in the attached screenshot. Please guide me if there is a work around where i want the order after a 768px breakpoint

Answer 1

If there is a knonwn height on large-4 , you could use a floatting method and a pseudo element, to push dow the first element in order to leave room for second element. DEMO:

@media only screen and (max-width: 767px) {
    .row:before {
        content:'';
        float:right;
        height:1.2em;
        width:0;
        margin-left:-0.25em;
    }
    .large-8 {
        clear:right;
        float:right;
    }
    .large-4 {
        float:none!important;
    }
}

---

You have the natural flex method if you do not mind leaving aside older browsers: DEMO

@media only screen and (max-width: 767px) {
    .row{
        display:flex;
        flex-direction:column;
    }
    .large-8 {
        order:2;
    }
}

Answer 2

Add push/pull classes to reorder the source: http://foundation.zurb.com/docs/components/grid.html? Look under source ordering, in that section there is a good example for what you want to do.

Answer 3

Check the foundation documentation You should read about source ordering.

Source Ordering Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.

Example:

<div class="row">
  <div class="small-10 small-push-2 columns">10</div>
  <div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row">
  <div class="large-9 large-push-3 columns">9</div>
  <div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row">
  <div class="large-8 large-push-4 columns">8</div>
  <div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row">
  <div class="medium-7 small-5 small-push-7 medium-push-5 columns">7</div>
  <div class="medium-5 small-7 small-pull-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row">
  <div class="medium-6 medium-push-6 columns">6</div>
  <div class="medium-6 medium-pull-6 columns">6, last</div>
</div>

Try it in your code, you will see, that columns with "last" named comes first.