Three Column Layout


Also see, layout-sidebars for a 3rd option of re-ordering columns.

3 Column Layouts

With the main body on the left, it is always positioned at the top. Followed by the other 2 columns. On smaller screens the other two columns are configured to share the same "row" on medium screens and full width on small screens. col-md-4 col-sm-12 mb-2
col-md-4 col-sm-6 mb-2
col-md-4 col-sm-6 mb-2

Main Body on Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus a. Sed ut augue ornare, elementum sapien et, maximus massa. Fusce a elit dapibus, volutpat ligula eleifend, cursus nulla. Curabitur porttitor urna eros, ut bibendum purus vulputate quis. Maecenas vel dolor venenatis, accumsan orci vitae, rhoncus sapien. Proin urna massa, congue ac leo at, blandit molestie urna. Phasellus nisi diam, euismod vel molestie sed, viverra vel ligula. Nam justo enim, mattis ut imperdiet at, viverra tempus nulla. Ut elementum imperdiet est, vitae porta nisl placerat vel. Duis et nunc magna. Proin id fringilla ligula. Etiam diam erat, accumsan quis risus ac, imperdiet ultricies purus. Ut ex nisl, vulputate vel ullamcorper eget, vehicula in massa. Praesent ullamcorper quam erat, at pulvinar magna ultricies imperdiet. In quis mi tellus.

Accordions Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Card image cap
Nature

Waterfalls

Card image cap
Feature

Train Station

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus.

Card image cap
Nature

Surf's Up

3 Column Layouts

With the main body on the right, on smaller screens the other two columns are configured to share the same "row" on medium screens and full width on small screens.
div id="first-col" class="col-md mb-3"
div id="second-col" class="col-md mb-3"
div id="fourth-col" class="col-md mb-3"

Accordion Style 2

  • Lorem ipsum dolor sit amet
  • Facilisis id fringilla ut ligula vitae
  • Donec laoreet ultricies rhoncus
  • Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Card image cap
Nature

Waterfalls

Card image cap
Feature

Waterfall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus.

Card image cap
Nature

Surf's Up

Main Body on Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus a. Sed ut augue ornare, elementum sapien et, maximus massa. Fusce a elit dapibus, volutpat ligula eleifend, cursus nulla. Curabitur porttitor urna eros, ut bibendum purus vulputate quis. Maecenas vel dolor venenatis, accumsan orci vitae, rhoncus sapien. Proin urna massa, congue ac leo at, blandit molestie urna. Phasellus nisi diam, euismod vel molestie sed, viverra vel ligula. Nam justo enim, mattis ut imperdiet at, viverra tempus nulla. Ut elementum imperdiet est, vitae porta nisl placerat vel. Duis et nunc magna. Proin id fringilla ligula. Etiam diam erat, accumsan quis risus ac, imperdiet ultricies purus. Ut ex nisl, vulputate vel ullamcorper eget, vehicula in massa. Praesent ullamcorper quam erat, at pulvinar magna ultricies imperdiet. In quis mi tellus.