Align Image and Text on same line on mobile - html

Question

I'm creating a series of cards to display on screen with both an image and text using bootstrap. The cards render as expected on desktop (see below), but fail to render properly on mobile (I need to have the image and text on the same line like in the desktop version).
On mobile it looks like so:
I'm trying to keep it all inline (like grubhub does)
My code is as follows:
<div className="container">
<div className="row">
<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-sm-8">
<div className="row" style={{paddingTop: 20, paddingBottom: 20, paddingLeft: 40}}>
<h4>
<b>{this.props.food.name}</b>
</h4>
<p style={{'fontWeight': 300}}>{this.props.food.description}</p>
<span className="munchtime pointer" style={{'fontSize': 16, 'fontWeight': 600}}>Add to Cart</span><br /><br />
{priceLabel}
</div>
</div>
<div className="d-flex col-sm-4">
<img src={this.props.food.images[0]} style={{width: '100%', height: 180, objectFit: 'cover'}} />
</div>
</div>
</div>
</div>
</div>
</div>
Any advice is appreciated!

Answer 1

Basically, you need to change your columns col-sm-8 and col-sm-4 by col-8 and col-4 respectively. I have made a basic example showing this also including some of your style:
.card-wrapper {
background-color: white;
border-radius: 5px;
border: 1px solid #EAE8E8;
}
.info-wrapper {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
.custom-img {
width: 100%;
height: 180px;
object-fit: cover;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!-- Card 1 -->
<div class="col-sm-6">
<div class="row m-1 card-wrapper">
<div class="col-8 info-wrapper">
<h4><b>Food Name</b></h4>
<p>Food Description</p>
</div>
<div class="col-4 p-0">
<img class="custom-img" src="https://via.placeholder.com/250"/>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-sm-6">
<div class="row m-1 card-wrapper">
<div class="col-8 info-wrapper">
<h4><b>Food Name</b></h4>
<p>Food Description</p>
</div>
<div class="col-4 p-0">
<img class="custom-img" src="https://via.placeholder.com/250"/>
</div>
</div>
</div>
</div>
</div>