- <div class="intro-url"><span class="intro-url-label">{{$url_label}}: </span><a href="{{$zrl}}">{{$url}}</a></div>
- {{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span> {{$network}}</div>{{/if}}
- {{if $location}}<div class="intro-location"><span class="intro-location-label">{{$location_label}}</span> {{$location}}</div>{{/if}}
- {{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$gender_label}}</span> {{$gender}}</div>{{/if}}
- {{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$keywords_label}}</span> {{$keywords}}</div>{{/if}}
- {{if $about}}<div class="intro-about"><span class="intro-about-label">{{$about_label}}</span> {{$about}}</div>{{/if}}
- <div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
- <div class="intro-note" id="intro-note-{{$contact_id}}">{{$note}}</div>
+ <div class="intro-contact-info hidden-xs">
+ <div class="intro-url"><span class="intro-url-label">{{$lbl_url}}: </span><a href="{{$zrl}}">{{$url}}</a></div>
+ {{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span> {{$network}}</div>{{/if}}
+ {{if $location}}<div class="intro-location"><span class="intro-location-label">{{$lbl_location}}</span> {{$location}}</div>{{/if}}
+ {{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$lbl_gender}}</span> {{$gender}}</div>{{/if}}
+ {{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$lbl_keywords}}</span> {{$keywords}}</div>{{/if}}
+ {{if $about}}<div class="intro-about"><span class="intro-about-label">{{$lbl_about}}</span> {{$about}}</div>{{/if}}
+ <div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
+ <div class="intro-note intro-note-{{$contact_id}}">{{$note}}</div>
+ </div>
+
+ {{* Additional information of the contact for mobile view *}}
+ <div class="intro-contact-info xs hidden-lg hidden-md hidden-sm">
+ <div class="intro-url"><span class="intro-url-label">{{$lbl_url}}:</span><a href="{{$zrl}}">{{$url}}</a></div>
+ {{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span>{{$network}}</div>{{/if}}
+ {{if $location}}<div class="intro-location"><span class="intro-location-label">{{$lbl_location}}</span>{{$location}}</div>{{/if}}
+ {{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$lbl_gender}}</span>{{$gender}}</div>{{/if}}
+ {{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$lbl_keywords}}</span>{{$keywords}}</div>{{/if}}
+ {{if $about}}<div class="intro-about"><span class="intro-about-label">{{$lbl_about}}</span>{{$about}}</div>{{/if}}
+ <div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
+ <div class="intro-note intro-note-{{$contact_id}}">{{$note}}</div>
+ </div>