Twitter Bootstrap Question posted in

Bootstrap stack elements top and bottom on mobile, sidebar on desktop-Twitter bootstrap

I have three elements in my layout, top bar, content and bottom bar.

I am using twitter bootstrap 4

On mobile I want them to stack as such:

top bar
content
bottom bar

on desktop I want this:

content    top bar
           bottom bar

a visual guide:
enter image description here

How do I even? I can’t seem to get them to line up properly and I’m way down the bottom of a rabbit hole here so I’m asking the stack.

code:

<html>
<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
	<div class=container>
		<div class=row>
			<div class="col-12 col-md-5 order-md-2">
				<h3>Top Bar</h3>
			</div>
		
			<div class="col-12 col-md-7 order-md-1">
				<h3>Content</h3>
				<p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
				<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p> 
				<p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
				<p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
			</div>
		
			<div class="col-12 col-md-5 order-md-2 offset-md-7">
				<h3>Bottom Bar</h3>
			</div>
		</div>
	</div>
</body>
Tags:

2

Answers


  1. 0

    You can use the order class to reorder your elements when changing viewports.

    Check it here: https://getbootstrap.com/docs/4.0/layout/grid/#reordering

    Login or Signup to reply.
  2. 0

    Either disable flex on Bootstrap or add a modifier on the row and set
    display: block;

    Float the middle child left, and then float the top and bottom bar right. Also remove the offset so it fills in the gap gracefully.

    This should get you what you want on desktop; of course you will need to remove those for your mobile breakpoint.

    <div class="container">
    <div class=row style="display: block;">
        <div class="col-12 col-md-5 order-md-2" style="float:right;">
            <h3>Top Bar</h3>
        </div>

        <div class="col-12 col-md-7 order-md-1" style="float:left;">
            <h3>Content</h3>
            <p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
            <p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p> 
            <p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
            <p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
        </div>

        <div class="col-12 col-md-5 order-md-2"  style="float:right;" >
            <h3>Bottom Bar</h3>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search