html - CSS-¿Cómo tener hijos en diferentes padres de la misma altura?

css3 flexbox

Question

Tengo una fila con 2 columnas. Dentro de estas columnas tengo un título, contenido y una lista. Tienen una longitud de contenido diferente.

Lo que quiero lograr es que la lista se mantenga una al lado de la otra en la misma línea sin romper la optimización móvil de arranque.

Primero lo probé con 3 filas diferentes, pero cuando las columnas se rompen, el contenido ya no se pertenece. ¿Hay una solución para lo que necesito sin JavaScript? Tal vez con flexbox de alguna manera?

Aquí está mi código actual:

<div class="light-grey-section ruler">
   <div class="container">
      <div class="row">
         <div class="light-section col-xs-12 col-md-6">
            <div class="panel panel-default panel-blank">
               <div class="panel-body">
                  <div class="content"> // contentlength is different in each column
                     <h2>
                        Lorem ipsum Lorem ipsum
                     </h2>
                     <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
                     </p>
                     <p>
                        Lorem ipsum dolor
                     </p>
                     <ul class="check"> // I want this list to stay in the same line with the other ul.check in the other column
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <div class="dark-section col-xs-12 col-md-6">
            <div class="panel panel-default panel-blank">
               <div class="panel-body">
                  <h2>
                     Lorem ipsum
                  </h2>
                  <p>
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                  </p>
                  <ul class="check">
                     <li>Lorem ipsum dolor sit amet,</li>
                     <li>
                        Lorem ipsum dolor sit amet,
                     </li>
                     <li>Lorem ipsum dolor sit amet,</li>
                     <li>Lorem ipsum dolor sit amet,</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

Para poder lograr eso sin usar el script, todos los elementos ( h2 , p , p , ul ) deben verse entre sí, lo que técnicamente significa que deben ser hermanos.

Y luego, para pantallas más anchas donde se sientan una al lado de la otra, deben reordenarse, donde el h2 viene primero ( order: 0 ) y así sucesivamente.

Utilicé una consulta de medios, pero es posible que desee agregar más, para que coincida con más de los puntos de ruptura de Boostrap.

Para agregar, es decir, un borde exterior, debe usar una combinación de border-top / border-left / border-right / border-bottom en los elementos, que también deben modificarse con la consulta, para cubrir tanto apilados horizontal como verticalmente artículos.

Codepen actualizado

@media (min-width: 768px) {
  
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="light-grey-section ruler">
  <div class="container">
    <div class="row">
      <div class="light-section col-xs-12">
        
        <div class="content">
          <h2>Lorem ipsum Lorem ipsum</h2>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
          </p>
          <p>
            Lorem ipsum dolor
          </p>
          <ul class="check">
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
          </ul>
          <h2>Lorem ipsum</h2>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          </p>
          <ul class="check">
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
          </ul>
        </div>
        
      </div>
    </div>
  </div>
</div>

Actualizado, basado en un comentario en una pregunta duplicada

Si uno tiene muchos elementos, puede agruparlos, es decir, 4 por grupo, para hacer que el CSS sea mucho más pequeño.

Codepen muestra

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.container .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container .row>* {
  flex-basis: calc(100% - 30px);
  min-width: 0;
}

.container .row>div {
  border: 2px solid gray;
}

.container .row>div:nth-child(8n+1),
.container .row>div:nth-child(8n+2),
.container .row>div:nth-child(8n+3),
.container .row>div:nth-child(8n+4) {
  background: lightgray;
}

.container .row>div:nth-child(4n+1) {
  border-width: 2px 2px 0 2px;
  margin-top: 10px;
}

.container .row>div:nth-child(4n+2) {
  border-width: 0 2px;
}

.container .row>div:nth-child(4n+2)+div {
  border-width: 0 2px;
}

.container .row>div:nth-child(4n+4) {
  border-width: 0 2px 2px 2px;
}

@media (min-width: 600px) {
  .container .row>* {
    flex-basis: calc(50% - 30px);
  }
  .container .row>div:nth-child(4n+1) {
    order: 0;
  }
  .container .row>div:nth-child(4n+2) {
    order: 1;
  }
  .container .row>div:nth-child(4n+2)+div {
    order: 2;
  }
  .container .row>div:nth-child(4n+4) {
    order: 3;
  }
  .container .row>div:nth-child(4n+9) {
    order: 4;
  }
  .container .row>div:nth-child(4n+10) {
    order: 5;
  }
  .container .row>div:nth-child(4n+10)+div {
    order: 6;
  }
  .container .row>div:nth-child(4n+12) {
    order: 7;
  }
}

<div class="container">
  <div class="row">  
      <div><h2>Title 1</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 2</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 3 is a bit longer to make it wrap</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>
        
      <div><h2>Title 4</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2 is a bit longer to force it to wrap</p></div>
      <div><button>Button</button></div>
  </div>
  
  <div class="row">  
      <div><h2>Title 5</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 6</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 7 is a bit longer to make it wrap</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>
        
      <div><h2>Title 8</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2 is a bit longer to force it to wrap</p></div>
      <div><button>Button</button></div>
  </div>  
</div>