<div class="wrapper">
            <div class="radio_tabs">

                <label class="radio_wrap" data-radio="radio_1">
                    <input type="radio" name="sports" class="input">
                    <span class="radio_mark">
                        Flex Direction : Row
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_2">
                    <input type="radio" name="sports" class="input">
                    <span class="radio_mark">
                        Flex Direction : Row-Reverse
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_3">
                    <input type="radio" name="sports" class="input">
                    <span class="radio_mark">
                        Flex Direction : Column
                    </span>
                </label>
                <label class="radio_wrap" data-radio="radio_4">
                    <input type="radio" name="sports" class="input">
                    <span class="radio_mark">
                        Flex Direction : column-reverse
                    </span>
                </label>
            </div>

            <div class="content">

                <div class="radio_content radio_1">
                    <h3> Flex Direction : Row</h3>
                    <div class="flex-direction-row">
                        <div class="flex-item-1">
                            1
                        </div>
                        <div class="flex-item-2">
                            2
                        </div>
                        <div class="flex-item-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_2">
                    <h3> Flex Direction : Row-Reverse</h3>
                    <div class="flex-direction-row-reverse">
                        <div class="flex-item-1">
                            1
                        </div>
                        <div class="flex-item-2">
                            2
                        </div>
                        <div class="flex-item-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_3">
                    <h3> Flex Direction : Column</h3>
                    <div class="flex-direction-column">
                        <div class="flex-item-1">
                            1
                        </div>
                        <div class="flex-item-2">
                            2
                        </div>
                        <div class="flex-item-3">
                            3
                        </div>
                    </div>
                </div>
                <div class="radio_content radio_4">
                    <h3> Flex Direction : Column-Reverse</h3>
                    <div class="flex-direction-column-reverse">
                        <div class="flex-item-1">
                            1
                        </div>
                        <div class="flex-item-2">
                            2
                        </div>
                        <div class="flex-item-3">
                            3
                        </div>
                    </div>
                </div>
            </div>
        </div>

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Exo 2', sans-serif;
}
body{
  background-color: #fff;
}
.wrapper{
  width: 90%;
  height: auto;
  background-color: #f9f7f7;
  padding: 30px;
  margin: 50px auto;
}
.wrapper .radio_tabs{
  height: 60px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size:14px;
  padding: 18px;
  display: flex;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.wrapper .radio_tabs label{
  margin-right: 5px;
  font-size: 12px;
  display: block;
  position: relative;
  cursor: pointer;
  padding-left:28px;
}
.wrapper .radio_tabs label .radio_mark:before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  background: url("radio_icon.png")no-repeat 0 0;
  width: 22px;
  height: 22px;

}

.wrapper .radio_tabs label .input:checked ~.radio_mark{
  color: #0075FF;
}

.wrapper .content{
  width: 100%;
  height: calc(100% - 70px);
  background: #fff;
  border-radius: 5px;
  padding: 18px;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}



.flex-container{
  display:flex;
  background-color:teal;
  padding:10px;
  margin-bottom:50px;
}
.flex-item-1{
  width:150px;
  height:150px;
  line-height:150px;
  background-color:#A6E7FF;
  margin:5px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.flex-item-2{
  width:150px;
  height:150px;
  line-height:150px;
  background-color:#C8F1D6;
  margin:5px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.flex-item-3{
  width:150px;
  height:150px;
  line-height:150px;
  background-color:#E6D0F7;
  margin:5px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.flex-direction-row{
  display:flex;
  flex-direction:row;
  background-color:#ffefd9;
  padding:10px;
  margin-bottom:50px;
  text-align: center;
}


.flex-direction-row-reverse{
  display:flex;
  flex-direction:row-reverse;
  background-color:teal;
  padding:10px;
  margin-bottom:50px;
  text-align: center;
}
.flex-direction-column{
  display:flex;
  flex-direction:column;
  background-color:teal;
  padding:10px;
  margin-bottom:50px;
  text-align: center;
}
.flex-direction-column-reverse{
  display:flex;
  flex-direction:column-reverse;
  background-color:teal;
  padding:10px;
  margin-bottom:50px;
  text-align: center;
}
h3{
  margin-bottom: 20px;
}

$(document).ready(function(){
// default hide all radio conteny
$(".content .radio_content").hide();
    $(".content .radio_content:first-child").show();
    
    $(".radio_wrap").click(function(){
var currrent_radio = $(this).attr("data-radio");
        $(".content .radio_content").hide();
$("." + currrent_radio).show();
    });
});