html - unable to manage bootstrap 4 div elements to the responsive design

Question

I'm working with bootstrap 4 and following codes,

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">

<div class="card-header rounded-0 border border-dark">
  <div class="row">
    <div class="col-12 col-md-4 ">
      <img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
    </div>
    <div class="col-12 col-md-8 ">
      <p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65937040/unable-to-manage-bootstrap-4-div-elements-to-the-responsive-design

Answer 1

View in Full Page , You will get it

body {
  padding-top: 40px;
}

.col-sm-6 {
  background: #ccc;
}

.other {
  background: #a4a4a4;
}

.p {
  text-align: center;
  padding-top: 120px;
}

.p a {
  text-decoration: underline;
  color: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1>Bootstrap Grid Demo</h1>
    </div>
    <div class="col-sm-6 other">
      <h1>2 Columns</h1>
    </div>
  </div>
</div>

<p class="p">Demo by Jabir Sayed. <a href="understanding-bootstrap-grid-system">See article</a>.</p>