How to place div in 4 sections for mobile view-CodePudding

I am trying to correctly locate my div for view from mobile device, currently I can locate my divs correctly in desktop view without any problem, I attach an example of how they are displayed in desktop view.

For the mobile view I would like the elements to be placed in the following way:

The code I have used to build the divs is as follows:

.CeroPadCeroMar {
  padding: 0px;
  margin: 0px;
}

.texto-encimaAnalisis {
  position: absolute;
  top: 10%;
  left: 8%;
}

.TextoAnalisis {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 30px;
  color: #0F196C;
}

.TextoAnalisisDesc {
  font-family: 'Lettera Text Std';
  font-style: normal;
  font-size: 15px;
  color: #616160;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="Industria" >
  <div >
    <img src="../content/image-backgroud.png"  alt="" width="auto" height="345">
    <div >
      <div >
        <div  style="min-height: 199px;">
          <div >
            <div  style="padding-right: 107px;">
              <p >
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p >
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>
            <div  style="padding-right: 107px;">
              <p >
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p >
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>
            <div  style="padding-right: 107px;">
              <p >
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p >
                <b style="font-weight: bold;">
                                           Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

            </div>

          </div>
          <div  style="margin-top: 50px; padding-right: 107px;">
            <p >
              <b style="font-weight: bold;">
                                        Lorem ipsum  amet. <br />dolor sit
                                    </b>
            </p>
            <p >
              <b style="font-weight: bold;">
                                        Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                    </b>
            </p>

          </div>

        </div>

      </div>
    </div>
  </div>
</section>

Is there a class or property that I can use to make the divs lay out how I want them to in mobile view?

CodePudding user response：

Bootstrap rows are always 12 fraction wide. If you want 3 boxes in a row on large devices you should use col-md-4 on the cards (12 / 4 = 3). To have 2 cards per row on small screens, you can use col-xs-6 which will then place 2 cards in a row (12 / 6 = 2):

/* for visualization purpose only */

section > div {
  box-sizing: border-box;
  border: 2px dashed red;
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="Industria" >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</section>