JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"/>
  <link rel="stylesheet" href="index.css">
</head>

<body>

<h1>Grid Elements</h1>

<div class="grid-container">

    <span class="mobile-menu-toggle-icon">
        <span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
            <svg aria-labelledby="menu" class="ast-mobile-svg ast-menu-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 13h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 7h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 19h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
            </svg>
        </span>
        <span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
            <svg aria-labelledby="menu-toggle-close" class="ast-mobile-svg ast-close-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24...

CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}

@media ( max-width: 768px) {
  .flex-container > div {
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .flex-container > div {
    flex-basis: 51%;
  }
}

/* non-essential demo styles */
.flex-container > div {
  height: 50px;
  background-color: lightgreen;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

JavaScript

var getOpenIcon = $('.ast-menu-svg');
    var openHamburger =$("<span class='ast-mobile-svg ast-menu-svg'><i class='fas fa-bars'></i></span> ");

    var getCloseIcon = $('.ast-close-svg');
    var closeHamburger =$("<span class='ast-mobile-svg ast-close-svg'><i class='fas fa-times'></i></span> ");

    getOpenIcon.insertBefore(openHamburger);
    getCloseIcon.insertBefore(closeHamburger);