Css 如何在reactjs上重新排序div

如何以css或其他方式重新排列div
这样，它将显示在1列中

<div className='allitem'>  
                <div className='item1'>
                    <h3>test1</h3>                     
                </div>

                <div className='item2'>
                    <h3>test2</h3>           
                </div>

                <div className='item3'>
                    <h3>test3</h3>             
                </div>
                
                <div className='item4'>
                    <h3>test4</h3>             
                </div>
            </div>
        </div>

---

您可以在外部父级

div

上使用网格布局。最简单的布局是定义两列

.allitem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

函数应用程序（）{
返回(
测试1
测试2
测试3
测试4
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
.allitem{
显示：网格；
网格模板柱：1fr 1fr；
}


.allitem {
  display: grid;
  grid-template-columns: 1fr 1fr;
}