Make it so that in Bootstrap 4 - on mobile version the 4th element becomes the first?

R

rmfan992018-06-27 16:37:42

Bootstrap

rmfan99, 2018-06-27 16:37:42

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="bootstrap-grid.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
  <h1 class="header">Почему нужно сделать это сейчас</h1>
     <div class="container">
         <div class="row">
             <div class="col-2" col-xl-2>
                 <img src="img/001-summer.png" alt="1">
             </div>
             <div class="col-12 col-xl-2">
                 <img src="img/002-camping.png" alt="2">
             </div>
             <div class="col-sm-12 col-xl-2">
                 <img src="img/003-mountains.png" alt="3">
             </div>
             <div class="col-sm-12 col-xl-2">
                 <img src="img/004-boarding-pass.png" alt="4">
             </div>
             <div class="col">
                 <img src="img/book.png" alt="5">
             </div>
             <div class="col">
                 <img src="img/reading-news.png" alt="6">
             </div>
         </div>
     </div>
  </body>
</html>

Greetings to all developers, I just can’t figure out how to do this, I’m new to this business, please don’t judge strictly !!

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

L

ljutaev, 2018-06-27
@rmfan99

https://getbootstrap.com/docs/4.0/utilities/flex/#order
Use mobile .order-sm-0 for the desired element, if just order-0 then the element will always be first)!

B

BarryHAllen, 2018-06-27
@BarryHAllen

use classes order-1 - order-12.

<div class="row">
             <div class="col-sm-2 col-xl-2 order-2">
                 <img src="img/001-summer.png" alt="1">
             </div>
             <div class="col-sm-2 col-xl-2 order-3">
                 <img src="img/002-camping.png" alt="2">
             </div>
             <div class="col-sm-2 col-xl-2 order-4">
                 <img src="img/003-mountains.png" alt="3">
             </div>
             <div class="col-sm-2 col-xl-2 order-1">
                 <img src="img/004-boarding-pass.png" alt="4">
             </div>
             <div class="col-sm-2 col-xl-2 order-5">
                 <img src="img/book.png" alt="5">
             </div>
             <div class="col-sm-2 col-xl-2 order-6">
                 <img src="img/reading-news.png" alt="6">
             </div>
</div>