Possible to Achieve This Mobile/Desktop Layout Using Bootstrap? (Or Other Grid)

Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

Try to float to the right: (see: http://bootply.com/78158)

CSS:

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

HTML:

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>

Is it possible, using bootstrap 4 grid, to change the layout of my page for mobile in this specific way?

custon class and display:contents could help for a few browsers:

example

@media screen and (max-width:569px) {
  .d-sm-contents {
    display: contents
  }
  .order-top {
    order: -1;
  }
}

[class^="col"]>div {
  border: solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ">
    <div class="col-sm-4 ">
      <div class="A">
        A
      </div>
    </div>
    <div class="col-sm-8 d-sm-contents">
      <div class="B col order-top">
        B
      </div>
      <div class="C col ">
        C
      </div>
    </div>
  </div>
</div>

How to achieve this desktop/mobile layout with Bootstrap 3?

This is very simple and you can do it using the grid system already within bootstrap.

.blue {  background: blue;}.green {  background: green;}.red {  background: red;}
.row-500 {  width: 500px;  margin: 0 auto;}
@media screen and (max-width: 500px) {  .row-500 {    width: 250px;  }}

<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row-500">  <div class="col-md-6 blue">250px</div>  <div class="col-md-6 green">250px</div></div><div class="row-500">  <div class="col-md-12 red">500px unless under 500px then its 250px</div></div>

Which Boostrap3 grid mode for mobile/desktop do you use?

I think you misunderstand how the grid can be used and you're way overthinking it. The sizes correspond to the way and at what size the columns stack. You can pick and choose and mix it up.

Sometimes it looks better on small devices to stack two images, one after the other. Sometimes leaving them side by side looks better. Just depends on the circumstance and content.

You can choose responsive or non responsive grids if you would like. You can choose to use the img-responsive class on images.

I lifted this little bit from their documentation:

Stacked-to-horizontal

http://getbootstrap.com/css/#grid

"Using a single set of .col-md- grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row."

And of course you can just use media queries to change whatever you want.

Stack on mobile while semi-two-column layout on desktop using bootstrap 5

Here you go...

You could use Bootstrap's order classes (read more about it here), but these are the most helpful when ordering elements that are inside the same wrapper (e.g., inside the same row). But there's an alternative solution...

The trick is to create Section 2 twice. Show Section 2 on desktop (add classes d-md-block d-none) and show Section 2 on mobile (add classes d-md-none d-block).

See the snippet below.

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

  <title>flex column example</title>

</head>

<body>

  <div class="container">

    <div class="d-flex flex-column flex-md-row">

      <div class="d-flex flex-column">
        <div class="bg-warning">
          Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book.
        </div>
        <div class="bg-danger d-md-none d-block">
          Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book.
        </div>
        <div class="bg-primary">
          Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book.
        </div>
      </div>

      <div class="d-flex flex-row">
        <div class="bg-danger d-md-block d-none">
          Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
          book.
        </div>
      </div>

    </div>

  </div>

</body>

</html>

How to preserve grid layout across devices using Bootstrap?

Note for TwBs v4 users: replace col-xs-* with col-*.

Original answer (TwBs v3) : Your col-* classes apply perfectly fine.

And Bootstrap is mobile first which means col-xs-7 doesn't need col-sm-7, col-md-7 or above.

You can check it by selecting the elements and watching their bounding-rect-box'es (which are highlighted by most dev-tools). However, this doesn't stop <iframe> elements (which have hardcoded width and height properties) to overflow the widths of their parents. If you want to override that, you need to set their width to 100%:

iframe {
  display: block;
  width: 100%;
}

See it working:

iframe {  display: block;  width: 100%;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="row">    <div class="col-xs-7" id="introduction">      <p>The project uses Machine Learning to identify the waste items. A brief introduction about the Machine Learning technology is provided in the video below.      </p>      <iframe width="500" height="205" src="https://www.youtube.com/embed/yofjFQddwHE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>    </div>    <div class="col-xs-5">      <iframe src="https://www.youtube.com/embed/7YgnJELpMyE?ecver=2" width="450" height="305" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>    </div>  </div></div>

Possible to Achieve This Mobile/Desktop Layout Using Bootstrap? (Or Other Grid)