There are six blocks with pictures and text.

  1. How to arrange blocks on a big screen in a row 2 on 3?

  2. How to set @media and width, positioning, so that when the screen is reduced (on mobile devices), these blocks do not go in a row 2 by 3, but strictly under each other?

<div class="container custom-container works-wrapp"> <div class="row"> <div class="content-wrap"> <div class="col-sol services-wrapp_item-block"> <div> <a> <img src="/local/templates/brandspot/images/prod-promoface.jpg" alt=""> <div class="hover-block"> <h3>Promo Face</h3> <p> Вспомогательная программа, позволяющая отслеживать<br> эффективность и осуществлять контроль<br> работы над промо-персоналом. </p> </div> </a> </div> <div> <a> <img src="/local/templates/brandspot/images/prod-ky.jpg" alt=""> <div class="hover-block"> <h3 class="small">Корпоративный университет </h3> <p> Виртуальный портал для дистанционного обучения и развития сотрудников, а также для ознакомления со структурой и внутренним взаимодействием в Компании. </p> </div> </a> </div> <div> <a> <img src="/local/templates/brandspot/images/3.jpg" alt=""> <div class="hover-block"> <h3>Promo Face</h3> <p> </p> </div> </a> </div> <div> <a> <img src="/local/templates/brandspot/images/4.jpg" alt=""> <div class="hover-block"> <h3>Test</h3> <p> </p> </div> </a> </div> <div> <a> <img src="/local/templates/brandspot/images/5.jpg" alt=""> <div class="hover-block"> <h3>Test</h3> <p> </p> </div> </a> </div> <div> <a> <img src="/local/templates/brandspot/images/6.jpg" alt=""> <div class="hover-block"> <h3>Test</h3> <p> </p> </div> </a> </div> </div> </div> </div> </div>

  • but here someone knows where this desired series? - Nikita Fast

1 answer 1

 <div class="row"> <div class="col-xs-12 col-sm-6">Привет! Я блок, который будет занимать всю ширину родителя при разрешении экрана меньше 450 `px`, а на других экранах - треть ширины родителя!</div> <div class="col-xs-12 col-sm-6">Привет! Я блок, который будет занимать всю ширину родителя при разрешении экрана меньше 450 `px`, а на других экранах - треть ширины родителя!</div> <div class="col-xs-12 col-sm-6">Привет! Я блок, который будет занимать всю ширину родителя при разрешении экрана меньше 450 `px`, а на других экранах - треть ширины родителя!</div> <div class="col-xs-12 col-sm-6">Привет! Я блок, который будет занимать всю ширину родителя при разрешении экрана меньше 450 `px`, а на других экранах - треть ширины родителя!</div> <div class="col-xs-12 col-sm-6">Привет! Я блок, который будет занимать всю ширину родителя при разрешении экрана меньше 450 `px`, а на других экранах - треть ширины родителя!</div> <div class="col-xs-12 col-sm-6">Привет! Я блок, который будет занимать всю ширину родителя при разрешении экрана меньше 450 `px`, а на других экранах - треть ширины родителя!</div> </div>

And somewhere in your css :

 .col-sm-6 { float: left; width: 49.9%; } .row { float: left; } @media (max-width: 450px) { .col-xs-12 { width: 100%; } }

Thus, you will have two columns, each with three lines, according to your comment. At any resolution of the screen, more than 450 px that is exactly what they will follow, and at a resolution less - they will occupy the entire width of the parent block.

  • That's right, but I wanted 2 columns and 3 lines each. those. correct to 49.9, it turns out. - Dmitry Nikitin