Попытка выровнять изображение по правой середине столбца в начальной загрузке

Question

Я пытаюсь выровнять изображение в моем столбце начальной загрузки вправо, а текст обернуть вокруг него слева следующим образом: https://codepen.io/freeCodeCamp/full/YqLyXB

Я исследовал flexbox и выровнять все по вертикалидень вместо того, чтобы делать свою работу (woops) и чувствую, что пришло время просто спросить экспертов.Вот как выглядит мой: https://codepen.io/Seaplush/pen/rKVLmX

.col2 img{
max-width: 100%;
  height: 50%;
  float: right;
}


  .col2{
  background-color: #cccccc;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
 }

Спасибо за помощь, это моя первая попытка на сайте, так что извините, если что-то вроде беспорядка для просмотра;)

Answer 1

Если вы используете bootstrap, почему бы вам не использовать вместо этого макет начальной загрузки?

Но если вы попытаетесь использовать вместо этого flex box, это некоторый намек ...

1. Вы должны установить ширину для текста и изображения ...

2. установить родительский элемент для этих 2 элементов, чтобы согнуть, и установить выравнивание содержимого.

пример:

.parent{ display:flex; align-content:space-around; }

Answer 2

Вы можете использовать столбцы начальной загрузки.Просто прочитайте и поймите немного больше о сетке Bootstrap.

Пожалуйста, прочитайте ссылки ниже:

https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.0/layout/overview/