<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> <!------ Include the above in your HEAD tag ----------> <div class="products"> <input class="sort-radio" type="radio" name="sort-radio" id="app"/> <input class="sort-radio" type="radio" name="sort-radio" id="game"/> <input class="sort-radio" type="radio" name="sort-radio" id="service"/> <div class="products__sort"> <label class="button" for="app">app</label> <label class="button" for="game">game</label> <label class="button" for="service">service</label> </div> <div class="products__wrap"> <div class="product" data-product-type="app">app</div> <div class="product" data-product-type="app">app</div> <div class="product" data-product-type="game">game</div> <div class="product" data-product-type="service">service</div> <div class="product" data-product-type="game">game</div> <div class="product" data-product-type="service">service</div> <div class="product" data-product-type="app">app</div> <div class="product" data-product-type="game">game</div> </div> </div>

@import url("https://fonts.googleapis.com/css?family=Quicksand:700"); body { padding: 62px; background: #F5F5F5; } body * { font-family: "Quicksand", sans-serif; } .products__sort { display: flex; flex-flow: wrap; } .products__sort .button { padding: 12px 24px; margin: 0 12px 12px 0; border: none; border-radius: 6px; background-color: #00BCD4; color: #fff; cursor: pointer; } .products__sort .button:hover { background-color: #007888; } .products__wrap { display: flex; flex-flow: wrap; margin: 48px 0 0; } .products__wrap .product { height: 112px; width: 112px; padding: 16px 32px; margin: 0 16px 16px 0; border: none; border-radius: 6px; background-color: rgba(0, 188, 212, 0.5); color: #007888; } .products .sort-radio { display: none; } .products .sort-radio[id="app"]:checked ~ .products__wrap .product[data-product-type="app"] { order: -1; background-color: #007888; color: #fff; } .products .sort-radio[id="app"]:checked ~ .products__sort .button[for="app"] { background-color: #007888; } .products .sort-radio[id="game"]:checked ~ .products__wrap .product[data-product-type="game"] { order: -1; background-color: #007888; color: #fff; } .products .sort-radio[id="game"]:checked ~ .products__sort .button[for="game"] { background-color: #007888; } .products .sort-radio[id="service"]:checked ~ .products__wrap .product[data-product-type="service"] { order: -1; background-color: #007888; color: #fff; } .products .sort-radio[id="service"]:checked ~ .products__sort .button[for="service"] { background-color: #007888; }