BOOTSTRAP 5: Three Columns, Middle on Top for Mobile

Miva Knowledge Base
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.
Important Notice: This information is for internal reference only. Use at your own risk.

BOOTSTRAP 5: Three Columns, Middle on Top for Mobile

Scot Ranney • January 22, 2025


<div class="container">
	<div class="row">
		<!-- Middle Column -->
		<div class="col-12 col-md-4 order-1 order-md-2 column">Middle Column</div>
		
		<!-- Left Column -->
		<div class="col-12 col-md-4 order-2 order-md-1 column">Left Column</div>
		
		<!-- Right Column -->
		<div class="col-12 col-md-4 order-3 order-md-3 column">Right Column</div>
	</div>
</div>

https://www.scotsscripts.com/mvblog/bootstrap-5-three-columns-middle-on-top-for-mobile.html

mvkb_bootstrap mvkb_html