Skip to main content
se añadieron 23 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Podrías construir una estructura similar a lo que buscas solamente con Boostrap, aprovechándote de su sistema de grid.

Los contenedores de colores son solamente para ilustrar el ejemplo. Para poder ver el salto entre dispositivos tendrías que reproducir el ejemplo en modo pantalla completa.

.contenedor {
  display: block;
  width: 100%;
  height: 100px;100%;
  padding: 50px 0;
}

.naranja {
  background-color: orange;
}

.verde {
  background-color: green;
}

.violeta {
  background-color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-5">
      <div class="contenedor naranja"></div>
    </div>
    <div class="col-12 col-sm-7">
      <div class="row">
        <div class="col-6 col-sm-12">
          <div class="contenedor verde"></div>
        </div>
        <div class="col-6 col-sm-12">
          <div class="contenedor violeta"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Podrías construir una estructura similar a lo que buscas solamente con Boostrap, aprovechándote de su sistema de grid.

Los contenedores de colores son solamente para ilustrar el ejemplo. Para poder ver el salto entre dispositivos tendrías que reproducir el ejemplo en modo pantalla completa.

.contenedor {
  display: block;
  width: 100%;
  height: 100px;
}

.naranja {
  background-color: orange;
}

.verde {
  background-color: green;
}

.violeta {
  background-color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-5">
      <div class="contenedor naranja"></div>
    </div>
    <div class="col-12 col-sm-7">
      <div class="row">
        <div class="col-6 col-sm-12">
          <div class="contenedor verde"></div>
        </div>
        <div class="col-6 col-sm-12">
          <div class="contenedor violeta"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Podrías construir una estructura similar a lo que buscas solamente con Boostrap, aprovechándote de su sistema de grid.

Los contenedores de colores son solamente para ilustrar el ejemplo. Para poder ver el salto entre dispositivos tendrías que reproducir el ejemplo en modo pantalla completa.

.contenedor {
  display: block;
  width: 100%;
  height: 100%;
  padding: 50px 0;
}

.naranja {
  background-color: orange;
}

.verde {
  background-color: green;
}

.violeta {
  background-color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-5">
      <div class="contenedor naranja"></div>
    </div>
    <div class="col-12 col-sm-7">
      <div class="row">
        <div class="col-6 col-sm-12">
          <div class="contenedor verde"></div>
        </div>
        <div class="col-6 col-sm-12">
          <div class="contenedor violeta"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Publicación recuperada por phpMyGuel
Publicación eliminada por phpMyGuel
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Podrías construir una estructura similar a lo que buscas solamente con Boostrap, aprovechándote de su sistema de grid.

Los contenedores de colores son solamente para ilustrar el ejemplo. Para poder ver el salto entre dispositivos tendrías que reproducir el ejemplo en modo pantalla completa.

.contenedor {
  display: block;
  width: 100%;
  height: 100px;
}

.naranja {
  background-color: orange;
}

.verde {
  background-color: green;
}

.violeta {
  background-color: violet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-5">
      <div class="contenedor naranja"></div>
    </div>
    <div class="col-12 col-sm-7">
      <div class="row">
        <div class="col-6 col-sm-12">
          <div class="contenedor verde"></div>
        </div>
        <div class="col-6 col-sm-12">
          <div class="contenedor violeta"></div>
        </div>
      </div>
    </div>
  </div>
</div>