CODEWITHSUNDEEP
csstwitter-bootstrap
Hassen Ch.
Hassen Ch.

Reputation: 1763

Bootstrap change position of columns and splitting them

So have this problem and didn't really find a solution to solve it. I have this initial design when the screen is large:

Initial layout big screen

And when the screen is resized to a small screen I want to have the following enter image description here

So It's actually a problem with the first one to have to logo as big as the Title and text together, and then move the title above the logo.

Upvotes: 1

Views: 829

Answers (1)

manneJan89
manneJan89

Reputation: 1024

It is all about positioning.

  1. Title
  2. logo
  3. text

Make a parent div with class row.

Then inside, create your title first with class col-md-6 col-xs-12 pull-right. This will cause the title to float right. Do the same with the text.

The logo should get the same classes, but pull-left instead of pull-right. This will cause it to float left.

But on mobile all will be below each other.

Check out the fiddle:

https://jsfiddle.net/80r028jq/1/

Upvotes: 5

Related Questions