Выровнять элементы по горизонтали бутстрап

У меня есть макет сетки начальной загрузки в моем веб-приложении, и я хочу выровнять все по одной строке. Например, при загрузке в полноэкранном режиме карточки выглядят следующим образом:

Однако при изменении размера страницы карточки выглядят следующим образом

Мне нужно сделать так, чтобы они выглядели как первое изображение, независимо от того, как изменяется размер страницы, но я не знаю, как это сделать.

Ниже мой код:

   <div className = "d-flex col-sm-6">
      <div className = "" style = {{backgroundColor: 'white', borderRadius: 5, border: '1px solid #EAE8E8'}}>
        <div className = "row">
          <div className = "d-flex col-md-8">
            <div className = "row" style = {{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
              <h4>
                <b>{this.props.restaurant.name}</b>&nbsp;
                {this.props.restaurant.dietaryRestrictions.map(function(dietaryRestriction, index) {
                  return(<div key = {index}><span className = "badge-sm badge-secondary" style = {{color: 'white', backgroundColor: '#DA9550', fontSize: 9}}>{dietaryRestriction}</span>&nbsp;&nbsp;&nbsp;</div>);
                })}
              </h4>
             {this.props.restaurant.description}
              <br /><br />
             <span className = "munchtime pointer"><i className = "fas fa-check"></i> <b>Add to Cart</b></span><br /><br />
                <b><s>${this.props.restaurant.price}</s></b> <span className = "discount"><b>${this.props.restaurant.price * this.props.restaurant.restaurant.discount}</b></span>
              </div>
            </div>
            <div className = "d-flex col-md-4">
                <img src = {this.props.restaurant.images[0]} style = {{width: '100%', height: 250, objectFit: 'cover'}} />
            </div>
        </div>
      </div>
    </div>