JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="box">
    <div class="box-item">
        <img src="https://placehold.it/350x150/5D48E6/ffffff" alt="">
        <span>item1</span>
    </div>
    <div class="box-item">
        <img src="https://placehold.it/350x150/20883C/ffffff" alt="">
        <span>item2</span>
    </div>
    <div class="box-item">
        <img src="https://placehold.it/350x150/000000/ffffff" alt="">
        <span>item3</span>
    </div>
</div>
   

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Товар 4</h4>
      </div>
      <div class="modal-body">
        <img id="modal_img" src="https://placehold.it/350x150" alt="" />
 
 <form id="four" name="form_four" class='order' method="post" action='order.php'>
                     <div class="row">
                      <div class="col-xs-10 col-xs-offset-1 text-center">
                     <div class='mail_success'>Ваше сообщение было отправлено!</div>
                                    <div class='mail_fail'>Возникли проблемы при отправке!</div>
                     </div>
                        </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class='name_error'>Введите имя</div>
                                        <div>
                                            <input type='text' name='name' class='name form-control' placeholder="ФИО">
                                      ...

CSS

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.box-item {
    width: 33.3%;
    float: left;
    padding: 10px;
    text-align: center;
}
.box-item img {
    max-width: 100%;
}

JavaScript

$('.box-item').click(function(){
	var title = $(this).find('span').text(),
        img = $(this).find('img').attr('src');

    $('.modal-title').text(title);
    $('#modal_img').attr('src', img);
    $('#myModal').modal('show');
});