<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container my-5">
<form action="controller" method="get" class="d-md-flex d-sm-block justify-content-between"> <input type="hidden" name="command" value="select-orders">
<h1 class="h5 align-self-center col-3">Search Order</h1>
<div class="btn-group align-self-center col-12 col-sm-12 col-md-8 col-lg-6"> <select name="searchType" class="btn btn-outline-dark col-3 col-sm-3">
<option value="orderId">Order ID</option>
<option value="created">Created</option>
<option value="customer">Customer</option>
<option value="status">Status</option>
</select> <input type="search" name="searchBy" class="col-6 col-sm-6"> <input type="submit" value="Search" class="btn btn-outline-dark col-3 col-sm-3"> </div>
</form>
<div class="d-md-flex d-none justify-content-md-between justify-content-sm-center align-content-center border-bottom border-2 my-2 bg-dark text-light p-3 rounded-3">
<div class="col-2 text-sm-center text-md-start align-self-center">
<h1 class="h5 fw-bold">Order ID</h1>
</div>
<div class="col-2 align-self-center">
<h1 class="h5 fw-bold">Created</h1>
</div>
<div class="col-3 align-self-center">
<h1 class="h5 fw-bold">Customer</h1>
</div>
<div class="col-2 align-self-center">
<h1 class="h5 fw-bold">Show details</h1>
</div>
<div class="col-2 align-self-center">
<h1 class="h5 fw-bold">Status</h1>
</div>
</div>
<div class="d-md-flex d-sm-block justify-content-md-between justify-content-sm-center text-center border-bottom border-2 my-2 bg-light p-2 rounded-3">
<div class="col-md-2 text-sm-center text-md-start align-self-center my-2">
<h1 class="h6">2F456DA</h1>
</div>
<div class="col-md-2 text-sm-center text-md-start align-self-center my-2">
