Сортировка элементов в две строки с использованием CSS

Question

Я настраиваю селектор способа оплаты Magento 1.9.Он отображает список dl, где элемент dt имеет имя метода, а элемент dd - информацию о методе.Я хотел бы визуализировать все элементы dt рядом в первой строке и методы dd во второй строке.Я безуспешно пытался сделать dl flex и использовать порядок элементов dt и dd.

<dl id="checkout-payment-method">
   <dt id="dt_method_1"></dt>
   <dd id="dd_method_1"></dd>
   <dt id="dt_method_2"></dt>
   <dd id="dd_method_2"></dd>
   <dt id="dt_method_3"></dt>
   <dd id="dd_method_3"></dd>
</dl>

Answer 1

Так что, хотя я бы не рекомендовал отменять явную семантическую иерархию, у вас есть несколько хакерских опций, таких как;

#checkout-payment-method {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#checkout-payment-method dt, #checkout-payment-method dd {  
  margin: 0;
  width: 33%;
}

#checkout-payment-method dt {
  border: red 1px solid;
  order: 1
}

#checkout-payment-method dd {
  border: green 1px solid;
  order: 2
}

<dl id="checkout-payment-method">
   <dt id="dt_method_1">dt1</dt>
   <dd id="dd_method_1">dd1</dd>
   <dt id="dt_method_2">dt2</dt>
   <dd id="dd_method_2">dd2</dd>
   <dt id="dt_method_3">dt3</dt>
   <dd id="dd_method_3">dd3</dd>
</dl>

Надеюсь, это поможет, ура!