I would like to change the vertical order of 2 columns on a page in mobile view, so that column 2 goes first and column 1 follows.
The current order is that column 1 goes first and column 2 goes second, both in mobile and desktop view. In mobile view, the columns are stacked vertically, which is how I want to keep them, only in different order.
I tried using float, but something in the template's CSS is overriding the customizations. Here is a test page, and here is the HTML.
<body class="theme-invert">
<div class="container">
<div class="row-fluid">
<section class="section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<h2>Column 1</h2>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<h2>Column 2</h2>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Edit: this is different from the question suggested in the comments because that starts out with columns in the same class, whereas my columns are already in different classes, but I still haven't been able to get them to behave differently in mobile view.
See Question&Answers more detail:os
