<style> .wrapper { display: flex; flex-direction: column } @media only screen and (max-width: 767px) { .wrapper1 { order: 2 } .wrapper2 { order: 1 } } </style> <body> <div class="wrapper"> <div class="wrapper1"> <div class="col s12 l6"> some text </div> </div> <div class="wrapper2"> <div class="col s12 l6"> some more text </div> </div> </div> </body>