Bootstrap 4 grid system breaks after setting display classes

user_6769598 0
Viewed 1562

I am trying to build two rows with Bootstrap 4, the one should be displayed on devices with viewport < tablet and the other > tablet. In other words, once the one is visible, the other is hidden. I am using the native d-- classes from Bootstrap 4, but in the > tablet case they break the columns somehow. I am not sure, if it's bug or just me, but I am stick with this for hours. Here is a simple example that I've made to represent the issue.

<html>
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
 <section class="container-fluid">
  <div class="row d-none d-md-block">
   <div class="col-4">
    <p>Test paragraph - desktop</p>
   </div>
   <div class="col">
    <p>Test paragraph - desktop</p>
   </div>
  </div>
  <div class="row d-xs-block d-md-none">
   <div class="col-8">
    <p>Test paragraph - mobile</p>
   </div>
   <div class="col">
    <p>Test paragraph - mobile</p>
   </div>
  </div>
 </section>
</body>
</html>

twitter-bootstrap css
1 Answers

You need to use d-md-flex class because d-md-block override flex property of bootstrap 4.....check this i have added d-md-flex class

<html>
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
 <section class="container-fluid">
  <div class="row d-none d-md-flex">
   <div class="col-4">
    <p>Test paragraph - desktop</p>
   </div>
   <div class="col">
    <p>Test paragraph - desktop</p>
   </div>
  </div>
  <div class="row d-xs-block d-md-none">
   <div class="col-8">
    <p>Test paragraph - mobile</p>
   </div>
   <div class="col">
    <p>Test paragraph - mobile</p>
   </div>
  </div>
 </section>
</body>
</html>

user_85054970
Related