Bootstrap Tutorial - Combine the Bootstrap classes to layout for different size screens








Combine the Bootstrap class

The following code stacks the columns on mobile by making one full-width and the other half-width.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<style>div{background:#eee;border:1px solid #DDD;}</style>
</head><!--  ww  w .j  a  v  a  2 s .co m-->
<body style='margin:20px;'>

    <div class="row">
      <div class="col-12 col-lg-8">8</div>
      <div class="col-6 col-lg-4">4</div>
    </div>

</body> 
</html>

Click to view the demo