JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
      <h2>Et tac</h2>
      <div class="d-flex flex-column flex-md-row mb-md-5">
        <div class="p-2 order-1 order-md-3 col-md-7">
          <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block" src="https://picsum.photos/id/215/200/200">
              </div>
              <div class="carousel-item">
                <img class="d-block" src="https://picsum.photos/id/225/200/200">
              </div>
              <div class="carousel-item">
                <img class="d-block" src="https://picsum.photos/id/235/200/200">
              </div>
            </div>
          </div>
        </div>
        
        <div class="p-2 order-2 order-md-1 col-md-3 d-flex flex-column justify-content-around">
          <div class="d-flex justify-content-md-end align-items-md-start">
            <p class="line line-left">
              <span>MENU 1</span>
            </p>
          </div>
          <div class="d-none d-md-flex justify-content-center">
            <img class="w-100" src="https://picsum.photos/100/100">
          </div>
        </div>
        
        <div class="p-2 order-3 order-md-2 col-md-2 d-flex align-items-md-center justify-content-md-center">
          <p class="line line-vertical line-left">
            <span>MENU 2</span>
          </p>
        </div>
      </div>
      
      <div class="d-flex flex-column...

CSS

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .line {
    position: relative;
  }
  .line-vertical {
    transform: rotate(270deg);
  }
  .line::before {
    content: "";
    display: block;
    border-top: solid 0.1rem #bebebe;
    height: 0.1rem;
    position: absolute;
    top: 1.5em;
    z-index: 0;
  }
  .line-left::before {
    width: 1000%;
    left: -900%;
  }
  .line-vertical::before {
    width: 250%;
    left: -150%;
  }
  .line-right::before {
    width: 1000%;
    right: -900%;
  }
  .line span,
  .line a {
    background: white;
    padding: 0 0.5em;
    position: relative;
    z-index: 1;
  }
}