Index: src/bp-xprofile/admin/css/admin-rtl.css
===================================================================
--- src/bp-xprofile/admin/css/admin-rtl.css	(revision 11047)
+++ src/bp-xprofile/admin/css/admin-rtl.css	(working copy)
@@ -284,3 +284,61 @@
 	display: none;
 	visibility: hidden;
 }
+
+/* xProfile Field Type - Date */
+
+.form-table.bp-date-options {
+	margin: 0 8px;
+}
+
+.form-table.bp-date-options th {
+	width: 150px;
+}
+
+.form-table td .date-format-section select {
+	margin-top: -2px;
+}
+
+.date-format-label {
+	display: inline-block;
+	width: 150px;
+}
+
+.date-format-custom-value,
+.date-range-numeric {
+	width: 56px;
+}
+
+.date-format-section {
+	margin-right: 25px;
+}
+
+@media screen and (max-width: 782px) {
+	.bp-date-formats .bp-date-format-option:first-of-type {
+		margin-top: 1em;
+	}
+	.bp-range-types .bp-date-format-option {
+		margin-bottom: 1em;
+		margin-top: 1em;
+	}
+	.form-table td input.date-format-custom-value,
+	.form-table td input.date-range-numeric {
+		display: inline-block;
+		margin-left: 10px;
+		width: 56px;
+	}
+	.form-table td .date-format-section select {
+		display: inline-block;
+		width: auto;
+	}
+	.date-format-section {
+		margin-right: 35px;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	.form-table .bp-range-types label {
+		clear: both;
+		display: block;
+	}
+}
Index: src/bp-xprofile/admin/css/admin.css
===================================================================
--- src/bp-xprofile/admin/css/admin.css	(revision 11047)
+++ src/bp-xprofile/admin/css/admin.css	(working copy)
@@ -285,6 +285,8 @@
 	visibility: hidden;
 }
 
+/* xProfile Field Type - Date */
+
 .form-table.bp-date-options {
 	margin: 0 8px;
 }
@@ -293,6 +295,10 @@
 	width: 150px;
 }
 
+.form-table td .date-format-section select {
+	margin-top: -2px;
+}
+
 .date-format-label {
 	display: inline-block;
 	width: 150px;
@@ -302,3 +308,37 @@
 .date-range-numeric {
 	width: 56px;
 }
+
+.date-format-section {
+	margin-left: 25px;
+}
+
+@media screen and (max-width: 782px) {
+	.bp-date-formats .bp-date-format-option:first-of-type {
+		margin-top: 1em;
+	}
+	.bp-range-types .bp-date-format-option {
+		margin-bottom: 1em;
+		margin-top: 1em;
+	}
+	.form-table td input.date-format-custom-value,
+	.form-table td input.date-range-numeric {
+		display: inline-block;
+		margin-right: 10px;
+		width: 56px;
+	}
+	.form-table td .date-format-section select {
+		display: inline-block;
+		width: auto;
+	}
+	.date-format-section {
+		margin-left: 35px;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	.form-table .bp-range-types label {
+		clear: both;
+		display: block;
+	}
+}
Index: src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php
===================================================================
--- src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php	(revision 11047)
+++ src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php	(working copy)
@@ -506,54 +506,62 @@
 			</th>
 
 			<td>
-				<fieldset>
+				<fieldset class="bp-range-types">
 					<legend class="screen-reader-text">
 						<?php esc_html_e( 'Range', 'buddypress' ); ?>
 					</legend>
 
 					<div class="bp-date-format-option">
-						<label>
+						<label for="range_type_absolute">
 							<input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
+							<?php esc_html_e( 'Absolute range', 'buddypress' ); ?>
+						</label>
 
-							<?php
-							printf(
-								/* translators: 1: Start year for date range, 2: End year for date range */
-								__( 'From %1$s to %2$s', 'buddypress' ),
-								sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ),
-								sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) )
-							);
-							?>
-						</label>
+						<div class="date-format-section">
+							<label for="field_settings[range_absolute_start]"><?php esc_html_e( 'Year start:', 'buddypress' ); ?></label>
+							<?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" id="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ); ?>
+							<label for="field_settings[range_absolute_end]"><?php esc_html_e( 'Year end:', 'buddypress' ); ?></label>
+							<?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" id="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) ); ?>
+						</div>
 					</div>
 
 					<div class="bp-date-format-option">
-						<label>
+						<label for="range_type_relative">
 							<input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
+							<?php esc_html_e( 'Relative range', 'buddypress' ); ?>
+						</label>
 
-							<?php
-							printf(
-								/* translators: 1: "From" year count for date range, 2: "To" year count for date range */
-								__( 'From %1$s to %2$s', 'buddypress' ),
-								sprintf(
-									'<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" value="%s" /> <select name="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
-									esc_attr( abs( $settings['range_relative_start'] ) ),
-									selected( true, $settings['range_relative_start'] <= 0, false ),
-									esc_attr__( 'years ago', 'buddypress' ),
-									selected( true, $settings['range_relative_start'] > 0, false ),
-									esc_attr__( 'years from now', 'buddypress' )
-								),
-								sprintf(
-									'<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" value="%s" /> <select name="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
-									esc_attr( abs( $settings['range_relative_end'] ) ),
+						<div class="date-format-section">
+							<label for="field_settings[range_relative_start]"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
+							<?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" id="field_settings[range_relative_start]" value="%s" />',
+								esc_attr( abs( $settings['range_relative_start'] ) )
+								);
+							?>
+							<label class="screen-reader-text" for="field_settings[range_relative_start_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
+							<?php printf( '<select name="field_settings[range_relative_start_type]" id="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
+								selected( true, $settings['range_relative_start'] <= 0, false ),
+								esc_attr__( 'years ago', 'buddypress' ),
+								selected( true, $settings['range_relative_start'] > 0, false ),
+								esc_attr__( 'years from now', 'buddypress' )
+								);
+							?>
+
+							<label for="field_settings[range_relative_end]"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
+							<?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" id="field_settings[range_relative_end]" value="%s" />',
+								esc_attr( abs( $settings['range_relative_end'] ) )
+								);
+							?>
+							<label class="screen-reader-text" for="field_settings[range_relative_end_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
+							<?php printf( '<select name="field_settings[range_relative_end_type]" id="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
 									selected( true, $settings['range_relative_end'] <= 0, false ),
 									esc_attr__( 'years ago', 'buddypress' ),
 									selected( true, $settings['range_relative_end'] > 0, false ),
 									esc_attr__( 'years from now', 'buddypress' )
-								)
-							);
+								);
 							?>
-						</label>
+						</div>
 					</div>
+
 				</fieldset>
 			</td>
 		</tr>
