我想为手机和台式机设计不同的卡。我为此使用了bootstrap的隐藏功能。最佳做法是错的吗？你能给我个建议吗？
我的老板说这对下一次不利，但是我找不到其他方法，因为我应该将某些div的位置从台式机更改为移动设备，或者将移动设备更改为台式机。
最良好的祝愿...
我正在将我的卡片视图共享为图片：Desktop view
移动视图：Mobile view
我来自React的代码：
<div>
<div className="card flight-item justify-content-center clearfix font-weight-bold">
<div style={styles.bigfont} className="body">
<div className="search-body" role="button" data-toggle="collapse" data-target="#collapse#{journey.ID}" aria-expanded="false" aria-controls="collapse#{journey.ID}">
<div className="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div className="row">
<div className="search-total">
<div className="search-group col-lg-3 col-md-3 col-sm-12 col-xs-12 font-weight-light">
<div className="search-group-item text-left">
</div>
<div className="hidden-xs hidden-sm search-group-item text-left p-t-20">
<p className="text-center">Flight Code</p>
</div>
</div>
<div className="search-group col-lg-3 col-md-3 col-sm-3 col-xs-3 p-t-10">
<div className="search-group-item">
<i className="material-icons medium">flight_takeoff</i>
</div>
<div className="search-group-item font-weight-bold">
{/* DEP DATE */}
</div>
<div className="search-group-item"> <small> DEP PORT CODE </small>
</div>
</div>
<div className="search-group col-lg-3 col-md-3 col-sm-3 col-xs-3 font-weight-light p-t-30">
<small> <i> 01H 50M </i> </small>
</div>
<div className="search-group col-lg-3 col-md-3 col-sm-3 col-xs-3 p-t-10">
<div className="search-group-item">
<i className="material-icons medium">flight_land</i>
{/* arr info */}
</div>
<div className="search-group-item">
{/* arr date */}
</div>
<div className="search-group-item"><small> ARR PORT CODE </small>
</div>
</div>
<div className="hidden-md hidden-lg hidden-xl col-sm-3 col-xs-3 search-group-item reserve-button text-center">
<div className="p-t-10">??? USD</div>
<Link to="/" className="button-1 btn btn-primary-button bg-pink" type="button" >Select
</Link>
<div className="hidden-md hidden-lg hidden-xl search-group-item text-center">
<p className="text-center font-weight-light"><small> <i>NO: AX105</i></small></p>
</div>
</div>
</div>
</div>
</div>
<div className="hidden-xs hidden-sm col-lg-3 col-md-3 col-sm-12 col-xs-12 align-middle search-result-right">
<div className="row">
<div className="search-group-item price">
<div className="collapse" id="collapse#{journey.ID}">
</div>
</div>
<div className="search-group-item reserve-button float-sm-left float-xs-left">
<div>
??? USD
</div>
<button className="button-1 btn btn-primary-button bg-pink" type="button" >Select
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>