Replicating bootstrap column structure on site that can't use bootstrap

Issue

I have perfectly working bootstrap code, however, I just realized that part of my issue is that our forum is having problems with bootstrap in general so it messes up a lot of other styling as well.

Is there an easy way to replicate this exactly through flex or display:grid? The idea is a row of 4 columns on desktop, and anything under ~990px would be two columns, splitting the four items into groups of 2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

Solution

Try the below code. This is without bootstrap. This will help to solve your problem.

.row {
  display: flex;
  flex-wrap: wrap;
}
.col{
  width: calc(100% / 4 - 30px);
  margin: 0 15px 30px;
}
img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

@media(max-width: 990px) {
  .col{
      width: calc(100% / 2 - 30px);
    }
}

<div class="team-icons row">
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

Answered By - Nikesh Kp