Как изменить порядок трех делений в двух столбцах?

Question

У меня есть три элемента, которые я хочу заказать иначе, чем они отображаются в разметке.

Я хочу сначала показать div one , а затем в первом столбце three под ним.А затем во втором столбце я хочу показать только div two .Моя текущая настройка CSS не может этого достичь.Как я могу переместить div two во второй столбец?

.main {
  width: 400px;
}
.box {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.box>* {
    flex: 1 1 100%;
    border: 1px solid red;
}
.box>div:first-child{
    flex: 1 1 70%;
    width: 70% !important;
}

.box>div:nth-child(2) {
    flex: 1 1 30%;
    order: 3;
    width: 30%;
    float: right;
}

.box>div:nth-child(3) {
    flex: 1 1 70%;
    width: 70%;
}

<div class="main">
  <div class="box">
    <div>One</div>
    <div>Two
      <p>paragraph</p>
    </div>
    <div>Three</div>
  </div>
</div>

Answer 1

Вы пытаетесь сделать это с динамическим ростом.К сожалению, браузер не может определить, когда и где он должен перенести второго дочернего элемента в следующий столбец, если вы это сделаете.Все это помещается в одну колонку, потому что вы на самом деле не сказали, какой высоты должен быть гибкий контейнер.Добавление высоты и замена объявлений flex для flex: 1 1 auto и flex: 1 1 100% создает перенос во второй столбец, которого вы, похоже, пытаетесь достичь.

.main {
  width: 400px;
}
.box {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  
  /* without this, it doesn't wrap to
     a second column.  You can change
     this to whatever height best fits
     your requirements. */
  height: 100px;
}
.box>* {
    flex: 1 1 auto;
    width: 70%;
    box-sizing: border-box;
    border: 1px solid red;
}
.box>div:nth-child(2) {
    flex-basis: 100%;
    width: 30%;
    order: 3;
}

<div class="main">
  <div class="box">
    <div>One</div>
    <div>Two
      <p>paragraph</p>
    </div>
    <div>Three</div>
  </div>
</div>

Answer 2

Что ж, я сделал это, используя метод таблицы, вы можете сделать это, используя макет сетки, но я использовал теги таблицы, потому что CSS CSS может вызвать проблемы в Internet Explorer, потому что IE не поддерживает CSS CSS.

.main {
      width: 400px;
    }
    .box {
      width: 50%;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }
    .box td {
        flex: 1 1 100%;
        border: 1px solid red;
    }
 

 <div class="main">
      <div class="box">
      <table>
      <tr>
        <td>One</td>
        <td rowspan=2>Two
          <p>paragraph</p>
        </td>
        
        </tr>
        <tr>
        <td>Three</td>
        </tr>
        </table>
      </div>
    </div>
    

Answer 3

Поскольку ваши width определены в CSS,
, возможно, не использует flex, система здесь проще:

.main {
  width: 400px;
}

.box {
  position: relative;
  width: 50%;
}

.box > * {
  box-sizing: border-box;
  border: 1px solid red;
  width: 70%;
}

.box>div:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
}

<div class="main">
  <div class="box">
    <div>One</div>
    <div>Two
      <p>paragraph</p>
    </div>
    <div>Three</div>
  </div>
</div>

Надеюсь, это поможет.