How to place div in 4 sections for mobile view

user_15500092 0
Viewed 36

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.

enter image description here

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

enter image description here

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" class="CeroPadCeroMar">
  <div class="col-xs-12 col-lg-12 CeroPadCeroMar">
    <img src="../content/image-backgroud.png" class="img-responsive" alt="" width="auto" height="345">
    <div class="texto-encimaAnalisis">
      <div class="col-md-12 col-xs-12 col-md-12 col-lg-12">
        <div class="col-md-12" style="min-height: 199px;">
          <div class="row">
            <div class="col-md-4" style="padding-right: 107px;">
              <p class="TextoAnalisis">
                <b style="font-weight: bold;">
                                            Lorem ipsum  amet. <br />dolor sit
                                        </b>
              </p>
              <p class="TextoAnalisisDesc">
                <b style="font-weight: bold;">
                                            Ea illo pariatur sit exercitationem rerum sed nihil omnis ad accusamus repudiandae.
                                        </b>
              </p>

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

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

            </div>

          </div>
          <div class="col-md-4" style="margin-top: 50px; padding-right: 107px;">
            <p class="TextoAnalisis">
              <b style="font-weight: bold;">
                                        Lorem ipsum  amet. <br />dolor sit
                                    </b>
            </p>
            <p class="TextoAnalisisDesc">
              <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?

twitter-bootstrap css html
1 Answers

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" class="row">
  <div class="col-xs-6 col-md-4">1</div>
  <div class="col-xs-6 col-md-4">2</div>
  <div class="col-xs-6 col-md-4">3</div>
  <div class="col-xs-6 col-md-4">4</div>
</section>

user_140724200
Related