Alignment of position / traction of an article using bootstrap 3

Question

I am using loader 3 and trying to adjust the grid alignment for an article on the desktop.

On a mobile device, I want to order the content of the article as follows:

1. Title
2. picture
3. Content

On the desktop, I want the image on the left, and the title and content on the right.

Here is my code

<article class="row"> <header class="col-md-8 col-md-push-4"> <a href="#"> <h2>Title</h2> </a> </header> <div class="col-md-4 col-md-pull-8"> <figure> <a class="thumbnail" href="#"> <img src="..." alt="4x3 Image" class="img-responsive"> <figcaption>Caption</figcaption> </a> </figure> </div> <div class="col-md-8 col-md-push-4"> <p>Content</p> </div> </article> 

But with this code, the content is on the right, but under the image.

Is there an easy way to get what I want?

Answer 1

Based on Is it possible to achieve this Mobile / Desktop layout using Bootstrap? (or other network)

CSS

 .floatright{float:right;} @media (max-width: 768px) { .floatright{float:none;} } 

HTML:

 <div class="container" style="background-color:green"> <article class="row"> <header class="col-md-8 floatright"> <a href="#"> <h2>Title</h2> </a> </header> <div class="col-md-4"> <figure> <a class="thumbnail" href="#"> <img src="..." alt="4x3 Image" class="img-responsive"> <figcaption>Caption</figcaption> </a> </figure> </div> <div class="col-md-8 floatright"> <p>Content</p> </div> </article> </div> 

Answer 2

this is your column class:

md: 4 (image) - 8 (name) => 1st row (maximum 12 columns)
8 (content) => new line

which will create a new row, a second row below the image / title column So you should use this column setting (using a hidden class) as follows:

md: 2 (image) - 5 (name) - 5 (hidden-xs hidden-sm)
5 (content)

just try this code:

CSS

 <style> .col-md-2{ height: 300px; background-color: blue; color: white; border: 2px solid red; } .col-md-4{ height: 100px; } .col-md-5{ height: 100px; background-color: red; color: white; border: 2px solid black; } </style> 

HTML:

  <article class="row"> <header class="col-md-5 col-md-push-2"> <a href="#"> <h2>Title</h2> </a> </header> <div class="col-md-2 col-md-pull-5"> <figure> <a class="thumbnail" href="#"> <img src="" alt="4x3 Image" class="img-responsive"> <figcaption>Caption</figcaption> </a> </figure> </div> <div class="hidden-xs hidden-sm"> <div class="col-md-4"></div> </div> <div class="col-md-5 col-md-pull-5"> <p>Content</p> </div> </article> 

maybe this will not solve the problem. but you can use this trick.
sorry for my bad english

Answer 3

Use a large div with class col-md-8 and place the header and text inside it and use the bootstrap class col-md-12 for both of them to stack over one another

Answer 4

Here's how to fix the problem.

 <article class="row"> <header class="col-md-8 pull-right"> <a href="#"> <h2>Title</h2> </a> </header> <div class="col-md-4 pull-left"> <figure> <a class="thumbnail" href="#"> <img src="..." alt="4x3 Image" class="img-responsive"> <figcaption>...</figcaption> </a> </figure> </div> <div class="col-md-8 pull-right"> <p>content</p> </div> </article>