Я работаю с функциональностью разметки Grid в React-Bootstrap и сильно борюсь с перемещением div в зависимости от ширины экрана / того, как div лучше всего подходит.
Вот React-Bootstrapкод для этого ...
<Row>
<Col>
<img src={rocketslogo.url}/>
</Col>
<Col xs={8}>
<div>
{teamSelect}
</div>
<div>
{yearsSelect}
</div>
<div>
{teamStatsAndInfo}
</div>
</Col>
<Col xs={12}>
{teamStatsAndInfo}
</Col>
</Row>
В настоящее время я отображаю teamStatsAndInfo дважды, чтобы показать, какой желаемый эффект я хотел бы получить, а именно: когда ширина больше, я бы хотел teamStatsAndInfo divбыть размещенным ниже выбора.Однако, когда ширина становится более узкой, я бы хотел, чтобы div teamStatsAndInfo был помещен ниже логотипа и выделенных элементов.
... поскольку логотип команды уменьшается, а выбор остается неизменным, имеет смысл переместить статистику и информацию о команде в виде собственного столбца ниже логотипа и выбора, однако я не уверенкак сделать это условно.
Я новичок в создании мобильных приложений и борюсь с адаптивным макетом.Я не уверен, что нарушаю многие правила передового опыта (сокращение логотипа с помощью выбора одинакового размера, как использовать его в Cols и т. Д.).Любые мысли или помощь по этому вопросу будет принята с благодарностью, спасибо!