Search code examples
cssmaterialize

Reorder columns with Materialize on phone

I'm using materialize framework and am trying to reorder the columns order in a phone view. I want to have the BUY BUTTON come before the CONTENT on mobile. Was trying pull and push but can't figure it out. Any help?

Thank you in advance.

<div class="row">
    <div class="col s12 m3 l3">
      <img src="">
    </div>
    <div class="row">
      <div class="col s12 m6 push-m6 l7">CONTENT</div>
      <div class="col s12 m6 pull-m6 l2">BUY BUTTON</div>
    </div>
</div>
Solution

  • I think you should organize your layout as mobile-first: the BUY BUTTON comes before by default, and in tablet screens or larger (.m or .l classes), you use push and pull:

    <div class="row">
    <div class="col s12 m3 l3">
        <img src="">
    </div>
    <div class="row">
        <div class="col s12 push-m6 m6 push-l7 l2">BUY BUTTON</div>
        <div class="col s12 pull-m6 m6 pull-l2 l7">CONTENT</div>
    </div>
</div>